import { footerList } from "../../router/page";
import "./style.css";
import { useNavigate, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";

const MyFooter = () => {
  // 跳转页面的hooks
  const navigate = useNavigate();

  // 当前页面的路由信息
  const location = useLocation();

  // 被选中的页面路径
  const [active, setActive] = useState("");

  // 监听location的变化
  useEffect(() => {
    setActive(location.pathname);
  }, [location]);

  // 跳转页面的方法
  const toView = (item) => {
    navigate(item.path);
  };

  return (
    <div className="footer-box">
      {footerList.length &&
        footerList.map((item, idx) => {
          return (
            <div
              key={idx}
              onClick={() => toView(item)}
              className={active === item.path ? "active" : ""}
            >
              {item.icon}
              <p>{item.title}</p>
            </div>
          );
        })}
    </div>
  );
};

export default MyFooter;
